@include('Admin.public.head')
<style type="text/css">
.am-btn-group am-btn-group-xs{
    text-align: center;
    margin-left: 18%;
}
#specs_btn{

    margin-top: 8px;
    border-radius: 10px;
    width: 74px;
    color: #5db95d;
}
.addColor{
	color: red !important;
}
</style>
<body>
@include('Admin.public.menu')

<div class=" admin-content" id="app">
    {{csrf_token()}}
    <div class="daohang">

    </div>
    <div class="admin-biaogelist">
    <div class="listbiaoti am-cf">
        <ul class="am-icon-flag on"> 栏目名称</ul>

        <dl class="am-icon-home" style="float: right;"> 当前位置： 首页 > <a href="#">商品列表</a></dl>

        <dl>
            <a type="button" href="{{url('/admin/goods/addGoods')}}" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus"> 添加商品</a>
        </dl>
    </div>
        <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
            <ul>
                <li>
                    <div class="am-btn-group am-btn-group-xs">
                        <select class="am-input-sm" v-model="search.cid" onchange="two_tid(this.value)">
                            <option value="">请选择一级分类</option>
                            <option v-for="val in categoryList" :value="val.id">@{{ val.name }}</option>
                        </select>
                    </div>
                </li>

                 <li style="display: none;" id="two_cid_li">
                    <div class="am-btn-group am-btn-group-xs">
                        <select class="am-input-sm" v-model="search.two_tid">
                            <option value="">请选择二级分类</option>
                            <option v-for="val in categoryLists" :value="val.id">@{{ val.name }}</option>
                        </select>
                    </div>
                </li>

                <li>
                    <div class="am-btn-group am-btn-group-xs">
                        <select class="am-input-sm" v-model="search.status">
                            <option value="0">上架/下架</option>
                            <option value="1">上架</option>
                            <option value="2">下架</option>
                        </select>
                    </div>
                </li>
                <li><input type="text" class="am-form-field am-input-sm am-input-xm" v-model="search.keyword" placeholder="关键词搜索" /></li>
                <li><button type="button" class="am-btn am-radius am-btn-xs am-btn-success" v-on:click="searchs()" style="margin-top: -1px;">搜索</button></li>
            </ul>
        </div>
        <form class="am-form am-g">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                <thead>
                    <tr class="am-success">
                        <!-- <th class="table-check">
							<input type="checkbox" />
						</th> -->
                        <th >排序</th>
                        <th >商品一级分类</th>
                        <th >商品二级分类</th>
                        <th >商品名称</th>
{{--                        <th >配送方式</th>--}}
                        <th >原价</th>
                        <th >现价</th>
                        <th >分佣PV值</th>
{{--                        <th >e+积分</th>--}}
                        <th >库存</th>
                        <th >已售</th>
                        <th >上架/下架<i class="am-icon-check am-text-warning"></i> <i class="am-icon-close am-text-primary"></i></th>
                        <th >商品介绍</th>
                        <th >修改日期</th>
                        <th >操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="val,index in shopList">
                        <!-- <td><input type="checkbox" /></td> -->
                        <td>@{{ val.sorting }}</td>
                        <td>@{{ val.classify }}</td>
                        <td>@{{ val.classifys }}</td>
                        <td>@{{ val.goodsname }}</td>
{{--                        <td>--}}
{{--                            <span v-show="val.is_gift == 1">包邮</span>--}}
{{--                            <span v-show="val.is_gift == 0">自提</span>--}}
{{--                        </td>--}}
						<!-- PK -->
                        <td>@{{ val.originalprice }}</td>
                        <td class="addColor">@{{ val.rulingprice }}</td>
                        <td>@{{ val.pk_integral }}</td>
{{--                        <td>@{{ val.is_explosive }}</td>--}}
                        <td>@{{ val.total }}</td>
                        <td>@{{ val.sold }}</td>
                        <td class="am-hide-sm-only">
                            <i v-show="val.status == 1" class="am-icon-check am-text-warning"></i>
                            <i v-show="val.status == 2" class="am-icon-close am-text-primary"></i>
                        </td>
                        <td><a v-on:click="mode(val.id)" :id="'mode-id'+val.id">展开</a><div :id="'mode'+val.id" style="display: none;" v-html="val.spec"></div></td>
                        <td class="am-hide-sm-only">@{{ val.created_at }}</td>
                        <td style="width: 8%;">
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <button type="button" title="编辑" class="am-btn am-btn-default am-btn-xs am-text-secondary" v-on:click="edit(val.id)"><span class="am-icon-pencil-square-o"></span></button>
                                    <button type="button" title="删除" class="am-btn am-btn-default am-btn-xs am-text-danger am-round" v-on:click="del(val.id,index)"><span class="am-icon-trash-o"></span></button>
                                    <br/>
                                 <button type="button" title="设置商品规格" class="am-btn am-btn-default am-btn-xs am-text-danger" v-on:click="specs(val.id)" id="specs_btn">规格设置</button>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            {{--<ul class="am-pagination am-fr">--}}
                {{--<li class="am-disabled"><a href="#">«</a></li>--}}
                {{--<li class="am-active"><a href="#">1</a></li>--}}
                {{--<li><a href="#">2</a></li>--}}
                {{--<li><a href="#">3</a></li>--}}
                {{--<li><a href="#">4</a></li>--}}
                {{--<li><a href="#">5</a></li>--}}
                {{--<li><a href="#">»</a></li>--}}
            {{--</ul>--}}
            {{--<hr />--}}
            {{--<p>注：.....</p>--}}
        <!--分页-->
            <ul class="am-pagination am-fr">
                <div class="block">
                    <el-pagination
                            background
                            :page-size="PagesData.per_page"
                            :current-page = "PagesData.current_page"
                            layout="total , prev, pager, next"
                            :total="PagesData.total"
                            @prev-click="changeClick"
                            @next-click="changeClick"
                            @current-change="changeClick">
                        >
                    </el-pagination>
                </div>
            </ul>
        </form>
        <script type="text/javascript">
            function two_tid(e)
            {
                //console.log(e);
                app.search.two_tid = '';
                $.post("/admin/classify/classify",{ '_token':'{{csrf_token()}}',class:'two_tid',cid:e },function (res) {
					console.log(res);
                    if(res.code){
                        $("#two_cid_li").show();
                        app.categoryLists = res.data
                    } else {
                        $("#two_cid_li").hide();
                        //layer.msg(res.data);
                    }
                });

            }
        </script>
        <script>
            var app = new Vue({
                el:"#app",
                data: {
                    shopList : [], //商品列表
                    search:{
                        cid:'', //商品一级分类
                        two_tid:'',//商品二级分类
                        status:'0', //上架下架
                        keyword:'', //关键字
                    },
                    //商品分类
                    categoryList :{},
                    categoryLists :{},
                    PagesData:[],//分页
                },
                //事件
                methods: {
                    //选择当前页
                    changeClick:function(e){
                        var rico = this
                        $.get("/admin/classify/goods",{'_token':'{{csrf_token()}}',class:'select',page:e},function (res) {
                            if(res.code){
                                app.shopList = res.data.data
                                app.PagesData = res.data
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    initialize:function () {
                        $.post("/admin/classify/goods",{'_token':'{{csrf_token()}}',class:'select'},function (res) {
                            if(res.code){
                                app.shopList = res.data.data
                                app.PagesData = res.data
                            } else {
                                layer.msg(res.data);
                            }
                        });
                        //商品分类
                        $.post("/admin/classify/classify",{'_token':'{{csrf_token()}}',class:'select_cid'},function (res) {
                            if(res.code){
                                app.categoryList = res.data
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    //搜索
                    searchs:function (id) {
                        $.post("/admin/classify/goods",{'_token':'{{csrf_token()}}',class:'select',keyword:app.search},function (res) {
                            if(res.code){
                                app.shopList = res.data.data
                                app.PagesData = res.data
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    //编辑
                    edit:function (id) {
                        window.location.href="/admin/classify/addGoods?id="+id;
                    },
                    //商品规格设置
                    specs:function( id ){
                        window.location.href="/admin/classify/specs?id="+id;
                    },
                    //删除
                    del:function (id,index) {
                        $.post("/admin/classify/goods",{'_token':'{{csrf_token()}}',class:'delete',id:id},function (res) {
                            if(res.code){
                                app.shopList.splice(index,1)
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    mode:function (id) {
                        var show = $('#mode'+id).css('display');
                        if (show == 'block'){
                            show = 'none';
                            $('#mode-id'+id).html('展开')
                        } else {
                            show = 'block';
                            $('#mode-id'+id).html('收起')
                        }
                        $('#mode'+id).css('display',show);
                    }
                },
                //自动执行
                mounted: function () {
                    this.initialize();//分公司
                },
            })
        </script>
@include('Admin.public.foot')